<!-- 名片详情 -->
<template>
	<view>
		<image class="details-img" :src="dataForm.logo" mode="widthFix"></image>
		<view class="card-detail">
			<view class="card-details">
				<view class="card-details-item">
					<view class="title">
						<image :src="dataForm.headimgurl" class="user-logo"></image>
						<text class="user-name">{{ dataForm.name }}</text>
						<view class="title-post">{{ dataForm.duties }}</view>
						<view class="user-detail">
							<view class="user-detail-item">
								<image src="../static/yellow/cp.jpg" mode="" class="user-detail-item-img"></image>
								<view class="detail-user-info">{{ dataForm.company }}</view>
							</view>
							<view class="user-detail-item">
								<image src="../static/yellow/ph.jpg" mode="" class="user-detail-item-img"></image>
								<view class="detail-user-info">{{ dataForm.phone }}</view>
							</view>
							<view class="user-detail-item">
								<image src="../static/yellow/ad.jpg" mode="" class="user-detail-item-img"></image>
								<view class="detail-user-info">{{ dataForm.address }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 发送名片或者保存通讯录 -->
				<view class="visiti">
					<view class="visit-item-one flex-c-c " @click="onShare">
						发名片
						<!-- <button class="share-btn" type="default" open-type='share'></button> -->
					</view>
					<view class="visit-item-two flex-c-c" @click="addPhone(dataForm)">保存到通讯录</view>
				</view>

				<view class="scroll-view">
					<view class="setUp-item" v-for="(item, index) in list" :key="index" @click="onCopyContent(dataForm[item.value])">
						<view class="setUp-i">
							<view class="flex-c-c">
								<image :src="item.icon" class="setUp-item-img"></image>
								<view class="">{{ item.name }}</view>
							</view>
							<view class="setUp-item-tel">{{ dataForm[item.value] }}</view>
						</view>
					</view>
				</view>

				<view class="exhibition">
					<view class="exhibition-item" @click="collection">
						<image class="exhibition-img" src="../static/ic_14.png" v-if="dataForm.is_follow == '0'"></image>
						<image class="exhibition-img" src="../static/ic_14_fill.png" v-else></image>
						<text>{{ dataForm.is_follow == 1 ? '已收藏' : '收藏' }}</text>
					</view>
					<view class="exhibition-item">
						<image style="width: 30rpx;height:30rpx;margin-right: 9rpx;" src="../static/ic_13.png"></image>
						<text>关注 {{ dataForm.my_collection ? dataForm.my_collection : 0 }}</text>
					</view>
					<view class="exhibition-item">
						<image src="../static/see.jpg" class="exhibition-img-see"></image>
						<text>浏览 {{ dataForm.view_count }}</text>
					</view>
				</view>

				<view class="line"></view>

				<view class="card-details-b">
					<view class=" company-profile" v-if="dataForm.introduce">
						<view class="personal-pdlr30">
							<view class="company-profile-title personal-video-and-company">
								<image src="../static/cop.jpg" class="company-profile-img"></image>
								<text>公司介绍</text>
							</view>
							<view class="" style="width: 100%;min-height: 200rpx;word-wrap:break-word"><rich-text selectable :nodes="dataForm.introduce"></rich-text></view>
						</view>
					</view>
					<view class="video" v-if="dataForm.video">
						<view class="personal-pdlr30">
							<view class="company-profile-title personal-video-and-company">
								<image src="../static/live.jpg" class="company-profile-img"></image>
								<text>视频</text>
							</view>
							<view class="video-v"><video id="myVideo" :src="dataForm.video" :danmu-btn="false" enable-play-gesture controls object-fit="contain"></video></view>
						</view>
					</view>
					<view class="d-image" v-if="dataForm.imgList">
						<view class="personal-pdlr30">
							<view class="company-profile-title personal-video-and-company">
								<image src="../static/jb.jpg" class="company-profile-img"></image>
								<text>图片</text>
							</view>
							<image :src="el" class="del-image" @click="onPreImg(index)" v-for="(el, index) in dataForm.imgList" :key="index" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cardMixin from '../mixins/index.js';
export default {
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	mixins: [cardMixin],
	data() {
		return {
			list: [
				{
					icon: require('../static/yellow/h-phone-filt.png'),
					name: '电话',
					value: 'phone'
				},
				{
					icon: require('../static/yellow/h-qq.png'),
					name: 'QQ',
					value: 'qq'
				},
				{
					icon: require('../static/yellow/h-wx.png'),
					name: '微信',
					value: 'weixin'
				},
				{
					icon: require('../static/yellow/h-comname.png'),
					name: '公司名称',
					value: 'company'
				},
				{
					icon: require('../static/yellow/h-email.png'),
					name: 'email',
					value: 'email'
				},
				{
					icon: require('../static/yellow/h-address.png'),
					name: '公司地址',
					value: 'address'
				}
			],
			list1: [
				{
					icon: '',
					name: '关注'
				},
				{
					icon: '',
					name: '收藏'
				},
				{
					icon: '',
					name: '分享'
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.details-img {
	position: relative;
	width: 750rpx;
	// height: 800rpx;
}

.card-detail {
	background-color: #f5f5f5;
	width: 100%;
	min-height: 100vh;
	top: -150rpx;
}
.card-details {
	position: relative;
	padding-top: 1rpx;
	// top: -150rpx;
	width: 100%;
	z-index: 30;
}

.card-details-item {
	width: 690rpx;
	padding: 0 30rpx;
	// height: 331rpx;
	background: #ffffff;
	box-shadow: 0 0 16rpx 0 rgba(173, 173, 173, 0.45);
	border-radius: 16rpx;
	margin: 30rpx auto 0;
}

.mt-30 {
	margin-top: 30rpx;
}

.del-image {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin-bottom: 20rpx;
}

.d-image {
	border-top: 10rpx solid #f5f5f5;
}

#myVideo {
	width: 100%;
	height: 100%;
}

video {
	width: 100%;
	height: 100%;
}

.personal-pdlr30 {
	padding: 0 30rpx;
	border-bottom: 10rpx solid #f5f5f5;
}

.company-profile {
	background-color: #ffffff;
}

.video .personal-pdlr30 {
	border-bottom: 0;
}

.video-v {
	width: 100%;
	height: 388rpx;
	border-radius: 10rpx;
	background: #f4f4f4;
}

.follow {
	position: relative;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	height: 130rpx;
}

.follow-title {
	font-size: 24rpx;
}

.flex {
	display: flex;
}

.flex-c-sb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-c-c {
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-details-item {
	padding: 40rpx 30rpx 45rpx 44rpx;

	.title {
		position: relative;
		vertical-align: bottom;

		.user-logo {
			position: absolute;
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			right: 33rpx;
			top: 0rpx;
		}

		.user-name {
			display: inline-block;
			font-size: 34rpx;
			font-family: PingFangSC;
			font-weight: 800;
			color: #222222;
			width: 430rpx;
		}

		.title-post {
			width: calc(100% - 150rpx);
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #222222;
			margin: 10rpx 0 30rpx;
		}

		.user-detail {
			.user-detail-item:nth-last-child(1) {
				margin-bottom: 0;
			}

			.user-detail-item {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
				line-height: 29rpx;

				.user-detail-item-img {
					width: 33rpx;
					height: 33rpx;
					margin-right: 21rpx;
				}
			}
		}
	}
}

.scroll-view {
	width: 100%;
	padding-left: 30rpx;
	overflow-x: scroll;
	white-space: nowrap;
}

.setUp-item {
	min-width: 276rpx;
	padding: 0 20rpx;
	height: 104rpx;
	background: #ffffff;
	border: 1px solid #999999;
	border-radius: 8rpx;
	margin-right: 20rpx;
	display: inline-block;

	.setUp-i {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;

		.setUp-item-img {
			width: 29rpx;
			height: 29rpx;
			margin-right: 10rpx;
		}
	}

	.setUp-item-tel {
		text-align: center;
		margin-top: 4rpx;
		font-size: 28rpx;
	}
}

.share-btn {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
}

/deep/ .scroll-view::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.function-key {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 50rpx 110rpx 30rpx;

	.function-key-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.function-key-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}

		margin-top: 20rpx;
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.visiti {
	margin: 30rpx 0;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	padding: 0 30rpx;
	box-sizing: border-box;

	.visit-item-one {
		position: relative;
		width: 330rpx;
		height: 80rpx;
		background: #ffffff;
		border: 1px solid #e5cd58;
		border-radius: 40rpx;
		color: #e5cd58;
	}

	.visit-item-two {
		color: #ffffff;
		width: 330rpx;
		height: 80rpx;
		background: #ecd461;
		border-radius: 40rpx;
	}
}

.exhibition {
	padding: 0 100rpx;
	margin: 30rpx 0 43rpx;
	display: flex;
	justify-content: space-between;

	.exhibition-item {
		display: flex;
		align-items: center;

		.exhibition-img {
			width: 29rpx;
			height: 29rpx;
			margin-right: 9rpx;
		}

		.exhibition-img-see {
			width: 40rpx;
			height: 30rpx;
			margin-right: 9rpx;
		}
	}
}

.line {
	width: 100%;
	height: 22rpx;
	background-color: #f5f5f5;
}

.company-profile-img {
	width: 46rpx;
	height: 36rpx;
	margin-right: 19rpx;
}

.personal-video-and-company {
	display: flex;
	width: 100%;
	font-size: 30rpx;
	padding: 30rpx 0;
}

.detail-user-info {
	flex: 1;
	word-break: break-all;
}
</style>
